/* style.css (已应用最终修复) */

/* ==========================================
   核心规则：显隐控制 (由 whitelist.js 动态添加/移除类)
   ========================================== */

/* 插件启用时，被JS标记为隐藏的元素 */
body.qra-enabled .qrq-hidden-by-plugin {
    display: none !important;
}

/* 插件启用时，明确隐藏原生的 Quick Reply 弹出按钮触发器 */
/* body.qra-enabled #qr--bar > #qr--popoutTrigger {
    display: none !important;
} */

/* 
   合并包裹器 Wrapper 本身：设置为 flex 容器 (对应 "合并QR" 模式)
*/
body.qra-enabled #qr--bar > .qr--buttons.qrq-wrapper-visible {
    display: flex !important; 
    flex-wrap: wrap; 
    gap: 5px; /* 保持间距 */
    align-items: center; /* 垂直居中 */
}

/*
   ★★★ 布局修复核心：display: contents ★★★
   【最终修复】：将直接子代选择器 > 改为后代选择器 (空格)，以匹配深层嵌套的容器。
   当白名单容器 (QR Set, JSR) 或受保护容器 (InputHelper) 位于 wrapper 内部任意位置时，
   使用 display: contents 使容器在布局上消失，其子按钮成为 wrapper 的直接 flex 子项，实现无缝排列。
*/
body.qra-enabled .qrq-wrapper-visible .qr--buttons.qrq-whitelisted-original,
body.qra-enabled .qrq-wrapper-visible div[id^="script_container_"].qrq-whitelisted-original,
/* 同时处理受保护的输入助手容器 (如果它们在 wrapper 内部) */
body.qra-enabled .qrq-wrapper-visible #input_helper_toolbar,
body.qra-enabled .qrq-wrapper-visible #custom_buttons_container
 {
    display: contents !important; 
}
/* 独立的输入按钮 (id="input_回车_btn") 是 .qr--button, JS保护它们不被隐藏。
   它们已经是按钮个体，原生样式会让它们作为 wrapper 的 flex 子项正确排列，无需 contents。 */


/*
    当白名单容器【不在】wrapper 内部时 (例如 ST 未开启 "合并QR")，
    它们是 #qr--bar 的直接子元素，此时它们需要 display: flex 来显示内部按钮。
    选择器：匹配 #qr--bar 的直接子元素(>)，且不是 wrapper 本身(:not) -- 这部分逻辑是正确的，保持不变
*/
body.qra-enabled #qr--bar > .qr--buttons.qrq-whitelisted-original:not(.qrq-wrapper-visible),
body.qra-enabled #qr--bar > div[id^="script_container_"].qrq-whitelisted-original {
     display: flex !important;
     gap: 5px; /* 容器间距 */
     align-items: center;
 }

 /* 确保单个按钮 (如果被白名单，或用于兜底) 正确显示 */
  body.qra-enabled .qr--button.qrq-whitelisted-original {
       /* .qr--button 原生样式通常是 inline-flex 或 flex */
      display: inline-flex !important; 
      align-items: center; justify-content:center;
  }


/* ==========================================
   插件状态控制
   ========================================== */

/* 插件禁用时，恢复 #qr--bar 的默认样式 */
body.qra-disabled #qr--bar {
    height: auto !important;
    overflow: visible !important;
}

/* 插件禁用时，隐藏插件的火箭按钮 */
body.qra-disabled #quick-reply-rocket-button {
    display: none !important;
}

/* 插件禁用时，【关键】确保恢复所有元素的默认 display */
body.qra-disabled .qrq-hidden-by-plugin,
body.qra-disabled .qrq-whitelisted-original, 
body.qra-disabled .qrq-wrapper-visible,
/* 显式恢复可能被 display:contents 影响的受保护容器 */
 body.qra-disabled #input_helper_toolbar,
 body.qra-disabled #custom_buttons_container
 { 
    display: initial !important; 
}
body.qra-disabled #qr--bar > #qr--popoutTrigger { display: initial !important; }


/* === 以下为你原有的其他样式，保持不变 === */

/* --- 快速回复按钮 --- */
#quick-reply-rocket-button {
    /* color: var(--button-text-color, #a0a0a0); */ /* 颜色由 primary/secondary-button 类控制 */
    font-size: 1.2em; /* 可以作为 FA 图标的默认大小参考 */
    line-height: var(--buttons-bar-height);
    height: var(--buttons-bar-height);
    display: flex;         /* 必须是 flex 才能正确居中内容 */
    align-items: center;   /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    margin-right: 4px;
    cursor: pointer;
    transition: all 0.2s;
    width: 32px;           /* 固定宽度 */
    overflow: hidden;      /* 防止内容溢出 */
    background-size: contain; /* 确保背景图完整显示 */
    background-position: center;
    background-repeat: no-repeat;
}

/* 移除按钮本身的 :hover 颜色设置，依赖 interactable 和 primary/secondary 类 */
/* #quick-reply-rocket-button:hover { ... } */

#quick-reply-rocket-button.active {
    /* 激活状态可以添加一些效果，例如边框或轻微背景变化 */
    /* box-shadow: inset 0 0 0 1px var(--button-text-active-color, #55aaff); */
}

/* --- 快速回复菜单容器 --- */
#quick-reply-menu {
    display: none;
    position: fixed;
    left: 50%;
    top: 190px; /* 或根据需要调整 */
    transform: translateX(-50%);
    z-index: 1001;
    background-color: var(--qr-menu-bg-color, rgba(0, 0, 0, 0.85));
    border: 1px solid var(--qr-menu-border-color, #555);
    border-radius: 8px;
    padding: 15px 10px 10px 10px;
    width: 600px;
    max-width: 80vw;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, border-color 0.3s;
}

/* --- 设置样式 --- */
.quick-reply-settings-row {
    display: flex;
    align-items: center;
    margin: 10px 0;
    gap: 10px;
}

.quick-reply-settings-row label {
    min-width: 80px; /* 稍微缩小一点 */
    flex-shrink: 0; /* 防止标签被压缩 */
    text-align: right;
    margin-right: 5px;
}

/* 调整下拉框 */
#quick-reply-menu-icon-type { /* 注意 ID 可能根据 constants.js 变化 */
    width: 120px !important;
    max-width: 120px !important;
}


/* --- 自定义图标和 Font Awesome 输入容器 --- */
.custom-icon-container,
.fa-icon-container {
    /* 初始隐藏，由 JS 控制显示 */
    /* display: none; */
    margin-top: 10px;
    /* 确保标签和输入框在同一行 */
    /* display: flex; Already handled by .flex-container */
    /* align-items: center; Already handled by .flex-container */
}

/* 调整自定义图标区域内部布局 */
.custom-icon-container > div {
    display: flex;
    flex-grow: 1;
    gap: 5px;
    align-items: center; /* 垂直居中输入框和按钮 */
}

.custom-icon-container input[type="text"] {
    flex-grow: 1; /* URL/代码输入框占据大部分空间 */
}

/* 自定义图标大小输入框样式 */
#quick-reply-menu-custom-icon-size { /* 注意 ID 可能根据 constants.js 变化 */
    width: 60px;
    flex-shrink: 0; /* 防止被压缩 */
    text-align: center;
}

.custom-icon-container button {
    flex-shrink: 0; /* 防止按钮被压缩 */
}

/* Font Awesome 输入框容器 */
.fa-icon-container input[type="text"] {
    flex-grow: 1;
}

/* 隐藏 Font Awesome 输入容器的默认样式 */
.fa-icon-container {
    display: none; /* 由 JS 控制 */
}

/* 菜单布局 */
.quick-reply-menu-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* 左右容器共有样式 */
.quick-reply-list {
    width: 48%;
    border: 1px solid var(--qr-title-border-color, #444);
    border-radius: 5px;
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
    transition: border-color 0.3s;
}

/* 标题样式 */
.quick-reply-list-title {
    text-align: center;
    color: var(--qr-title-color, #ccc);
    font-size: 14px;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--qr-title-border-color, #444);
    transition: color 0.3s, border-bottom-color 0.3s;
}

/* 快速回复项样式 */
.quick-reply-item {
    display: block;
    width: 100%;
    padding: 5px 8px;
    margin: 4px 0;
    background-color: var(--qr-item-bg-color, rgba(60, 60, 60, 0.7));
    color: var(--qr-item-text-color, white);
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
}

.quick-reply-item:hover {
    background-color: var(--qr-item-hover-bg-color, rgba(80, 80, 80, 0.85)); /* 使用变量 */
    /* 可选：加一点阴影或高亮边框 */
    /* box-shadow: 0 2px 8px rgba(38,215,174,0.10); */
}

/* 滚动条样式 */
.quick-reply-list::-webkit-scrollbar {
    width: 6px;
}

.quick-reply-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.quick-reply-list::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.5);
    border-radius: 3px;
}

.quick-reply-list::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.7);
}

/* 空列表提示 */
.quick-reply-empty {
    color: var(--qr-empty-text-color, #666);
    text-align: center;
    padding: 10px;
    font-style: italic;
    font-size: 12px;
    transition: color 0.3s;
}

/* 菜单样式设置面板 */
.quick-reply-style-group {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.quick-reply-style-group h4 {
    margin: 5px 0;
    font-size: 14px;
    color: var(--text-color, #ccc);
}

/* 菜单样式设置面板 - 确保背景不透明 */
#quick-reply-menu-menu-style-panel { /* 注意 ID 可能根据 constants.js 变化 */
    display: none;
    position: fixed;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    z-index: 1002;
    border-radius: 10px;
    padding: 20px;
    width: 500px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    background-color: var(--background-color1, #0f0f0f);
    border: 1px solid var(--border-color, #444);
    color: var(--text-color, #fff);
}

/* 菜单样式面板标题样式 */
#quick-reply-menu-menu-style-panel h3 {
    margin: 0;
    color: var(--text-color, #fff);
}

/* 统一菜单样式标题和设置选项文字样式 */
.quick-reply-style-group h4,
.quick-reply-settings-row label { /* Re-apply text color */
    color: var(--text-color, #fff);
}

/* 改进颜色选择器样式 - 去掉边框 */
.qr-color-picker {
    width: 40px;
    height: 25px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

/* 颜色文本输入框 - 用于移动设备 */
.qr-color-text-input {
    width: 70px;
    height: 25px;
    padding: 0 5px;
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    background: var(--background-color2, #1f1f1f);
    color: var(--text-color, #fff);
    font-family: monospace;
}

/* 颜色选择器容器 */
.color-picker-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 滑动条容器 - 防止换行 */
.slider-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 150px;
}

/* 调整不透明度滑动条 */
.qr-opacity-slider {
    flex: 1;
    min-width: 80px;
    margin: 0 5px;
}

/* 不透明度数值 - 防止换行 */
.opacity-value {
    min-width: 24px;
    text-align: center;
    white-space: nowrap;
}

/* 移动设备适配 */
@media screen and (max-width: 768px) {
    .quick-reply-settings-row {
        flex-wrap: wrap; /* 允许换行 */
    }
    .quick-reply-settings-row label {
        width: 100%; /* 标签占据整行 */
        text-align: left; /* 左对齐 */
        margin-bottom: 5px;
    }

    /* 优化自定义图标输入 */
    .custom-icon-container > div {
        flex-wrap: wrap; /* 允许内部元素换行 */
    }
    .custom-icon-container input[type="text"],
    .custom-icon-container input[type="number"] {
        width: calc(50% - 5px); /* 尝试并排，留出间隙 */
        min-width: 100px; /* 最小宽度 */
    }
     .custom-icon-container button {
        width: 100% !important; /* 文件选择按钮占满一行 */
        margin-top: 5px;
     }

    /* 优化 FA 输入 */
    .fa-icon-container input[type="text"] {
        width: 100%; /* FA 输入框占满 */
    }

    /* 其他移动端调整... */
}

/* 将变量声明添加到:root以确保全局可用 */
:root {
    --qr-item-bg-color: rgba(60, 60, 60, 0.7);
    --qr-item-text-color: white;
    --qr-title-color: #ccc;
    --qr-title-border-color: #444;
    --qr-empty-text-color: #666;
    --qr-menu-bg-color: rgba(0, 0, 0, 0.85);
    --qr-menu-border-color: #555;
    /* 新增：定义item悬停背景色变量，方便统一修改 */
    --qr-item-hover-bg-color: rgba(80, 80, 80, 0.85); /* 示例值，比默认项背景色稍亮或不同 */
}

/* 透明选择框样式 */
.transparent-select {
    background-color: transparent !important;
    border: 1px solid var(--border-color, #444) !important;
}

/* 修改使用说明面板样式 */
.qr-usage-panel {
    display: none;
    position: fixed;
    left: 50%;
    /* top is dynamically set by JS */
    transform: translateX(-50%); /* Horizontal centering */
    z-index: 9999; /* 确保在最上层 */
    background-color: var(--background-color1, #0f0f0f);
    border: 1px solid var(--border-color, #444);
    border-radius: 10px;
    padding: 15px;
    width: 500px;
    max-width: 90vw;
    max-height: 80vh; /* Max height */
    overflow-y: auto; /* Add scroll if needed */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.quick-reply-usage-content {
    color: var(--text-color, #ccc);
    line-height: 1.5;
    margin: 0; /* 去除默认margin */
}

.quick-reply-usage-content p {
    margin-top: 0;
    margin-bottom: 7px; /* 减小段落间距 */
}

/* 确保最后一个段落没有底部间距 */
.quick-reply-usage-content p:last-child {
    margin-bottom: 0;
}

/* 使用说明标题样式 */
.qr-usage-panel h3 {
    color: white !important; /* 强制白色 */
    font-weight: bold !important; /* 强制加粗 */
    text-align: center;
    margin: 0 0 7px 0;
}

/* 确定按钮样式 */
.qr-usage-panel .menu_button {
    min-width: 80px;
    margin: 0 auto; /* Center the button if it's the only element */
}

/* 将通用的.menu_button选择器改为更具体的选择器 */
.qr-usage-panel .menu_button,
#quick-reply-menu-menu-style-panel .menu_button { /* 注意 ID 可能根据 constants.js 变化 */
    width: auto !important;
    padding: 0 10px !important;
    white-space: nowrap;
}

/* 添加到style.css */
.custom-icon-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#quick-reply-menu-custom-icon-select {
    width: 150px;
    margin-left: 5px;
    height: 28px;
    background-color: var(--bg1);
    color: var(--grey0);
    border: 1px solid var(--grey1);
}

#quick-reply-menu-custom-icon-save {
    margin-left: 0;
    padding: 2px 8px;
    height: 28px;
}

/* --- 精美白名单管理UI --- */
.qr-whitelist-panel {
    display: none;
    position: fixed;
    left: 50%;
    top: 12%;
    transform: translateX(-50%);
    z-index: 9999;
    background: linear-gradient(135deg, #23243a 0%, #2e3350 100%);
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    padding: 28px 32px 22px 32px;
    width: 480px;
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
    color: #f3f6fa;
    border: none;
    backdrop-filter: blur(8px);
    animation: fadeInScale 0.4s;
}
@keyframes fadeInScale {
    from { opacity: 0; transform: translateX(-50%) scale(0.95);}
    to   { opacity: 1; transform: translateX(-50%) scale(1);}
}
.qr-whitelist-panel h3 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #7f7fd5 0%, #86a8e7 50%, #91eac9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.qr-whitelist-panel .menu_button {
    background: linear-gradient(90deg, #7f7fd5 0%, #86a8e7 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 18px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(100,120,255,0.10);
    transition: background 0.2s, transform 0.15s;
}
.qr-whitelist-panel .menu_button:hover {
    background: linear-gradient(90deg, #91eac9 0%, #7f7fd5 100%);
    transform: translateY(-2px) scale(1.04);
}

.qr-whitelist-panel label {
    font-size: 1em;
    color: #b6c3e0;
    margin-bottom: 6px;
    display: block;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.qrq-whitelist-list {
    width: 100%;
    height: 220px;
    overflow-y: auto;
    border-radius: 12px;
    padding: 8px 6px;
    background: rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(100,120,255,0.08) inset;
    margin-bottom: 0;
    border: 1.5px solid rgba(130,150,255,0.18);
    transition: box-shadow 0.2s;
}

.qrq-whitelist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin-bottom: 7px;
    background: rgba(130,150,255,0.13);
    color: #f3f6fa;
    border-radius: 7px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(100,120,255,0.07);
    border: 1px solid transparent;
    transition: background 0.18s, color 0.18s, border 0.18s;
    user-select: none;
}
.qrq-whitelist-item.qr-item::before,
.qrq-whitelist-item.jsr-item::before {
    display: inline-block;
    width: 1.5em;         /* 固定宽度，保证对齐 */
    text-align: center;   /* 图标居中 */
    margin-right: 6px;
    font-size: 1em;
    opacity: 0.85;
    flex-shrink: 0;       /* 防止被压缩 */
}
.qrq-whitelist-item.qr-item::before {
    content: "★";
    color: #91eac9;
}
.qrq-whitelist-item.jsr-item::before {
    content: "🌙";
    color: #ffd700;
}

/* 新增 LWB 项目的样式 */
.qrq-whitelist-item.lwb-item::before {
    content: "⚙️"; /* 使用齿轮图标 */
    color: #a0a0ff;  /* 使用淡紫色 */
}

.qrq-whitelist-item:hover {
    background: linear-gradient(90deg, #86a8e7 0%, #91eac9 100%);
    color: #23243a;
    border: 1px solid #91eac9;
}

#qrq-whitelist-save-status {
    text-align: center;
    color: #91eac9;
    height: 22px;
    margin-top: 10px;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 1px;
}

.qr-whitelist-panel > p {
    color: #b6c3e0;
    font-size: 0.98em;
    margin-bottom: 16px;
}

.qr-whitelist-panel > div[style*="display:flex"] {
    gap: 18px !important;
}

.qr-whitelist-panel label {
    margin-bottom: 4px;
}

@media (max-width: 600px) {
    .qr-whitelist-panel {
        padding: 12px 4vw 10px 4vw;
        width: 98vw;
    }
    .qrq-whitelist-list {
        height: 150px;
    }
}

.qrq-whitelist-empty-tip {
    color: #b6c3e0;
    font-size: 0.98em;
    text-align: center;
    padding: 18px 6px;
    font-style: italic;
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
}
